<template>
  <div>
    <Collapse value="0">
      <Panel :name="`${i}`"  v-for="(item, i) in curProperty[category]" :key="i">
        <Div :gutter="2" style="display:inline-flex;align-items: center">
          <span>{{curProperty[category][i][0]}}</span>
          <Button class="ivu-ml" size="small" @click="delOption(i)">-</Button>
        </Div>
        <cfgEditTable slot="content" v-model="curProperty[category][i][1]" :columns="columns" :showNum="false"></cfgEditTable>
        <!-- <Table ref="table" :columns="columns" :data="curProperty[category][i][1]" slot="content">
          <template slot-scope="{ row, index }" slot="value">
            <span>{{JSON.stringify(row)}}</span>
            <fieldCell
                v-model="curProperty[category][i][1][index][row.key]"
                :config="row.config || { editor: 'text' }"
            ></fieldCell>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="add(i,index)">+</Button>
            <Button type="error" size="small" v-if="curProperty[category][i][1].length>1" @click="remove(i,index)">-</Button>
          </template>
        </Table> -->
      </Panel>
      <Panel name="newOption">
        <Div :gutter="2" style="display:inline-flex;align-items: center">
          <Input v-model="newOptionName"></Input>
          <Button class="ivu-ml" size="small" @click="addOption">+</Button>
        </Div>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
    import fieldCell from './fieldCell'
    import storeVar from '../../mixins/storeVar';
    export default {
        name: 'localOptionsList',
        components: { fieldCell },
        mixins: [storeVar],
        props: {
            category: {
                default: () => {
                    return 'localOptions';
                }
            }
        },
        data () {
          return {
              newOptionName: '',
              columns: [
                  {
                      key: 'labelEN',
                      title: this.$t(`compDesign.jProperty.labelEN`),
                      minWidth: 100,
                      elementName: 'fieldCell',
                      props: { config: { type: 'text' } },
                  },
                  {
                      key: 'labelCN',
                      title: this.$t(`compDesign.jProperty.labelCN`),
                      minWidth: 100,
                      elementName: 'fieldCell',
                      props: { config: { type: 'text' } },
                  },
                  {
                      key: 'value',
                      title: this.$t(`compDesign.jProperty.value`),
                      minWidth: 100,
                      elementName: 'fieldCell',
                      props: { config: { type: 'text' } },
                  },
                  {
                      key: 'intValue',
                      title: this.$t(`compDesign.jProperty.intValue`),
                      minWidth: 100,
                      elementName: 'fieldCell',
                      props: { config: { type: 'number', min: 1 } },
                  },
                  {
					          slot: 'operation'
                  }
              ]
          };
        },
        methods: {
            addOption (i) {
                if (!!this.newOptionName && this.newOptionName !== '') {
                    this.curProperty[this.category].push([
                        this.newOptionName,
                        [{ labelEN: '', labelCN: '', value: '' }]
                    ])
                    this.syncGroup();
                    this.compGroup.currentClassObject._setFieldOptionName();
                    this.newOptionName = ''
                }
            },
            delOption (i) {
                this.curProperty[this.category].splice(i, 1)
                this.syncGroup();
                this.compGroup.currentClassObject._setFieldOptionName();
            },
            add (i, index) {
                this.curProperty[this.category][i][1].push({
                    labelEN: '', labelCN: '', value: ''
                })
                this.syncGroup();
                this.compGroup.currentClassObject._setFieldOptionName();
            },
            remove (i, index) {
                this.curProperty[this.category][i][1].splice(index, 1)
                this.syncGroup();
                this.compGroup.currentClassObject._setFieldOptionName();
            }
        },
        computed: {
        }
    };
</script>
<style scoped lang="scss">

</style>
